<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui" template="/template/template_layout_lrt.xhtml"
	xmlns:s="http://sduept.security.el/func">
	<ui:define name="head">
		<title>轮播图管理</title>
		<link rel="stylesheet"
			href="/resources/bootstrap/css/bootstrap-datetimepicker.min.css" />
		<style>
		  .ui-orderlist .ui-orderlist-list{
		     height:100%;
		  }
		  #createForm .ui-fileupload-content,#editForm .ui-fileupload-content{
   display:none;
} 
#editForm .ui-fileupload-buttonbar,#createForm .ui-fileupload-content{
    background: white;
    border: none;
}
.inEffective{
   background-color:#E3E3E3;
}
		</style>
	</ui:define>
	<ui:define name="top-box-tools">
		<h:form id="searchForm">
			<p:outputLabel value="创建时间：" for="sCreateTime" style="margin-right:5px;margin-left:10px;" />
		    <p:calendar id="sCreateTime"  pattern="yyyy-MM-dd" navigator="true" autocomplete="off"
				value="#{bannerController.sCreateTime}" />
			 <p:outputLabel for="eCreateTime" value="至"
					style="margin-right:5px;margin-left:5px;" />
			 <p:calendar id="eCreateTime" pattern="yyyy-MM-dd" navigator="true" autocomplete="off" value="#{bannerController.eCreateTime}"/>
			 <p:outputLabel value="标题:" for="title" style="margin-right:5px;margin-left:10px;" />
				 <p:inputText id="title" value="#{bannerController.title}"></p:inputText>
			 <p:commandButton id="searchBtn" value="查询"
					update="leftForm editorForm" icon="ui-icon-search" style="margin-left:30px"
					actionListener="#{bannerController.searchByCondition}" />
			 <p:commandButton  value="查看全部" update="leftForm searchForm editorForm"  style="margin-left:10px"
					actionListener="#{bannerController.searchAll}" />
		</h:form>
	</ui:define>
	<ui:define name="left-box-title">
	   轮播图列表
	</ui:define>
	<ui:define name="left-box-body">
	    <h:form id="leftForm">
	     <p:growl id="msg" showDetail="true"></p:growl>
		 <p:confirmDialog global="true" showEffect="fade"
			hideEffect="fade">
			<p:commandButton value="是" type="button"
				styleClass="ui-confirmdialog-yes" icon="ui-icon-check" />
			<p:commandButton value="否" type="button"
				styleClass="ui-confirmdialog-no" icon="ui-icon-close" />
		 </p:confirmDialog>
	     <p:toolbar id="btns">
			<f:facet name="left">
				<p:commandButton value="新建" icon="fa fa-plus" actionListener="#{bannerController.preCreate}" oncomplete="PF('createDlg').show()" update="leftForm createForm:createDlg" rendered="#{s:hasPermission(session,'gzgl_yddsjwh_lbtsz_xj')}"></p:commandButton>
				<p:commandButton value="编辑" icon="fa fa-pencil" actionListener="#{bannerController.preEdit}" disabled="#{bannerController.selected==null}" oncomplete="PF('editDlg').show()" update="leftForm editForm:editDlg" rendered="#{s:hasPermission(session,'gzgl_yddsjwh_lbtsz_bj')}"></p:commandButton>
				<p:commandButton value="删除" icon="fa fa-trash" disabled="#{bannerController.selected==null}" actionListener="#{bannerController.delete}" update="leftForm editorForm" rendered="#{s:hasPermission(session,'gzgl_yddsjwh_lbtsz_sc')}">
				   <p:confirm header="提示" message="确定删除该记录吗?" icon="ui-icon-alert" />
				</p:commandButton>
				<p:commandButton value="效果预览" icon="ui-icon-circle-triangle-e" update="viewForm" oncomplete="PF('viewDialog').show()" style="margin-left:10px"/> 
			</f:facet>
		</p:toolbar>
    	  <p:dataTable id="bannerTb" widgetVar="banner" var="banner" rowKey="#{banner.id}"  emptyMessage="暂无数据" draggableRows="true"
				value="#{bannerController.banners}" rowIndexVar="ite" selection="#{bannerController.selected}" rowStyleClass="#{bannerController.getRowClass(banner)}">
				<p:ajax event="rowReorder" listener="#{bannerController.onRowReorder}" update="bannerTb" />
				<p:ajax event="rowSelectRadio" update="editorForm leftForm:btns" listener="#{bannerController.onBannerSelect}" oncomplete="resizeEditor()"/>
				<p:column selectionMode="single" width="40" style="text-align:center" />
				<p:column width="50" headerText="序号" style="text-align:center">
					<h:outputText value="#{ite+1}" />
				</p:column>
				<p:column headerText="图片" width="100">
					<p:graphicImage 
					value="#{request.contextPath}/getServerImage?path=#{banner.path}&amp;d=#{bannerController.milSeconds}"
					style="width:80px;height:50px" />
				</p:column>
				<p:column headerText="标题">
					<h:outputText value="#{banner.title}" />
				</p:column>
				<p:column headerText="有效期">
					<h:outputText value="#{banner.validDate}">
					   <f:convertDateTime pattern="yyyy-MM-dd"></f:convertDateTime>
					</h:outputText>
				</p:column>
			</p:dataTable>
		</h:form>
	</ui:define>
	<ui:define name="right-box-title">内容</ui:define>
	<ui:define name="right-box-body">
		<h:form id="editorForm">
			<p:toolbar>
			  <f:facet name="left">
			      <p:commandButton type="button" value="保存内容" disabled="#{bannerController.selected==null}"  onclick="getContentLength()" 
		         	     rendered="#{s:hasPermission(session,'gzgl_yddsjwh_lbtsz_bcnr')}" />
			  </f:facet>
			</p:toolbar>
		   <p:textEditor id="editor" value="#{bannerController.selected.link}"  style="margin-bottom:10px;over-flow:auto"/>
		   <p:remoteCommand name="validContentLength" actionListener="#{bannerController.saveText}" update="leftForm:msg"></p:remoteCommand> 
		</h:form>
		<h:form id="createForm">
			<p:remoteCommand name="createValidDateChange" update="createValidDate" action="#{bannerController.genCreateValidDate}" />
			<p:dialog widgetVar="createDlg" header="新建"  modal="true" id="createDlg" width="450" height="280" >
				<p:toolbar>
					<f:facet name="left">
						<p:commandButton value="保存" icon="ui-icon-disk" actionListener="#{bannerController.saveCreate}" update="leftForm searchForm" />
						<p:commandButton value="取消" icon="ui-icon-cancel" oncomplete="PF('createDlg').hide()"/>
					</f:facet>
				</p:toolbar>
				<p:panelGrid style="width:100%">
					<p:row>
						<p:column style="width:65px">
							<p:outputLabel value="标题"/>
						</p:column>
						<p:column colspan="2" >
							<p:inputText style="width:100%" value="#{bannerController.created.title}" />
						</p:column>
					</p:row>
					<p:row>
						<p:column>
							<p:outputLabel value="图片"/>
						</p:column>
						 <p:column>
					        <p:graphicImage id="createImage" stream="false"
								value="#{bannerController.newImage}" style="width:60px;height:50px" />
					   </p:column>
					   <p:column style="width:40%">
					      <p:fileUpload fileUploadListener="#{bannerController.handleIconUpload}" 
								update="createImage" mode="advanced" auto="true"  label="选择图片"/> 
					   </p:column>
					</p:row>
					<p:row>
					   <p:column>
							<p:outputLabel value="有效期"/>
						</p:column>
					   <p:column colspan="2">
							<p:selectOneRadio onchange="createValidDateChange()"  value="#{bannerController.interval}">
					            <f:selectItem itemLabel="一周" itemValue="7"  />
					            <f:selectItem itemLabel="一个月" itemValue="30" />
					            <f:selectItem itemLabel="三个月"  itemValue="90" />
					            <f:selectItem itemLabel="自定义"  itemValue="0" />
					        </p:selectOneRadio>
						</p:column>
					</p:row>
					<p:row>
						<p:column>
							<p:outputLabel value=""/>
						</p:column>
						<p:column colspan="2">
					        <p:calendar widgetVar="createValidDate"  id="createValidDate" disabled="#{bannerController.interval != 0}" value="#{bannerController.created.validDate}" pattern="yyyy-MM-dd"
					                mindate="Date()" navigator="true"  readonlyInput="true"/>
						</p:column>
					</p:row>
				</p:panelGrid>
			</p:dialog>
			</h:form>
			<h:form id="editForm">
			    <p:remoteCommand name="editValidDateChange" update="editValidDate" action="#{bannerController.genSelectedValidDate}" />
				<p:dialog widgetVar="editDlg" header="编辑" modal="true" id="editDlg" width="450" height="280">
					<p:toolbar>
						<f:facet name="left">
							<p:commandButton value="保存" icon="ui-icon-disk" actionListener="#{bannerController.saveEdit}" update="leftForm" oncomplete="PF('editDlg').hide()"/>
							<p:commandButton value="取消" icon="ui-icon-cancel" oncomplete="PF('editDlg').hide()"/>
						</f:facet>
					</p:toolbar>
					<p:panelGrid style="width:100%">
						<p:row >
						<p:column style="width:80px">
							<p:outputLabel value="标题"/>
						</p:column>
						<p:column colspan="2" >
							<p:inputText style="width:100%" value="#{bannerController.selected.title}" />
						</p:column>
						</p:row>
						<p:row>
							<p:column>
								<p:outputLabel value="图片"/>
							</p:column>
							 <p:column>
						        <p:graphicImage id="image"
									rendered="#{bannerController.selected.path != null}"
									value="#{request.contextPath}/getServerImage?path=#{bannerController.selected.path}&amp;d=#{bannerController.milSeconds}"
									style="width:60px;height:50px" />
						        <p:graphicImage id="newImage" stream="false"
									value="#{bannerController.newImage}" style="width:60px;height:50px" />
						   </p:column>
						   <p:column style="width:40%">
						      <p:fileUpload fileUploadListener="#{bannerController.handleIconUpload}" oncomplete="hideImg()"
									update="image newImage" mode="advanced" auto="true"  label="选择图片"/> 
						   </p:column>
						</p:row>
						<p:row>
						  <p:column>
						    <p:outputLabel value="创建时间"/>
						  </p:column>
						  <p:column colspan="2">
						      <h:outputText value="#{bannerController.selected.createDate}">
						         <f:convertDateTime pattern="yyyy-MM-dd"></f:convertDateTime>
						      </h:outputText>
						  </p:column>
						</p:row>
						<p:row>
						   <p:column>
								<p:outputLabel value="有效期"/>
							</p:column>
						   <p:column colspan="2">
								<p:selectOneRadio onchange="editValidDateChange()"  value="#{bannerController.interval}">
						            <f:selectItem itemLabel="一周" itemValue="7"  />
						            <f:selectItem itemLabel="一个月" itemValue="30" />
						            <f:selectItem itemLabel="三个月"  itemValue="90" />
						            <f:selectItem itemLabel="自定义"  itemValue="0" />
						        </p:selectOneRadio>
							</p:column>
					</p:row>
					<p:row>
						<p:column>
							<p:outputLabel value=""/>
						</p:column>
						<p:column colspan="2">
					        <p:calendar widgetVar="editValidDate"  id="editValidDate" disabled="#{bannerController.interval != 0}" mindate="#{bannerController.selected.createDate}"
					               value="#{bannerController.selected.validDate}" pattern="yyyy-MM-dd"  navigator="true"  readonlyInput="true"/>
						</p:column>
					</p:row>
					</p:panelGrid>
				</p:dialog>
			</h:form>
		  	<p:dialog widgetVar="viewDialog" header="轮播图" modal="true" id="viewDialog" width="450" height="400">
				<h:form id="viewForm">
					<p:galleria  value="#{bannerController.banners}" var="image"  panelWidth="400" panelHeight="300" showCaption="false">
						<p:graphicImage value="#{request.contextPath}/getServerImage?path=#{image.path}"/>
					</p:galleria>
				</h:form> 
			</p:dialog>
	</ui:define>
	<ui:define name="contentend">
	<script src="#{request.contextPath}/resources/bootstrap/js/bootstrap-datetimepicker.min.js"></script>
	   <script>
	     var centerH=500;
	     $(function(){
	    	 centerH=$(".content>.full-content").height()-200;
	     });
	     function resizeEditor(){
	         document.getElementById("editorForm:editor_editor").style.height=centerH+"px";
	     }
   	     function hideImg(){
  	    	  document.getElementById("editForm:image").style.display="none";
  	      }
   	     function getContentLength(){
   	    	var max = 1900000; 
   	    	var content=document.getElementsByName("editorForm:editor_input")[0].value;	
   	    	if(content.length &lt; max){
   	    		validContentLength();
   	    	} else {
   	    		layer.alert("您上传的图片太大，请使用图片工具将图片按比例放缩至100KB以下，以适应在手机端显示。"+"当前内容长度 "+content.length+" "+",最大允许长度 "+max);
   	    	}//1904658  1996650 
   	     }
   	    </script>
	</ui:define>
</ui:composition>
